<template>
  <a-modal
    :visible="visible"
    :confirm-loading="confirmLoading"
    title="修改角色菜单"
    :ok-text="'确认保存'"
    :mask-closable="false"
    @cancel="onClose"
    @ok="handleSubmit"
  >
    <a-tree
      v-model="checkedKeys"
      :tree-data="data"
      checkable
      show-icon
      show-line
      default-expand-all
      :replace-fields="{
        title: 'title',
        key: 'id',
      }"
    >
      <app-icon slot="icon" slot-scope="item" :value="item.icon" />

      <span
        slot="title"
        slot-scope="item"
        :style="
          item.status != 1
            ? {
                color: '#999',
              }
            : {}
        "
        style="position: relative;"
      >
        {{ item.title }}
        <span style="color: #999; margin-left: 10px;">
          <span v-if="item.page_type == 0">目录</span>
          <span v-else-if="item.page_type == 1">
            菜单 {{ item.link_mark }} {{ item.page_url_show }}
          </span>
          <span v-else-if="item.page_type == 2">
            按钮 {{ item.page_mark }} {{ item.link_url_show }}
          </span>
        </span>
      </span>
    </a-tree>
  </a-modal>
</template>

<script>
import userRoleMenu from "@/api/userRoleMenu"
import pageRole from "@/api/pageRole"
export default {
  model: {
    //event:什么时候触发v-model行为
    event: "change-visible",
    // 定义传递给v-model的那个变量，绑定到哪个属性值上
    prop: "visible",
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    platCode: {
      type: String,
      default: undefined,
    },
    roleCode: {
      type: String,
      default: undefined,
    },
    selectItems: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      buttonCol: { span: 18, offset: 4 },
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      confirmLoading: false,
      iconVisible: false,
      checkedKeys: undefined,
      data: [],
    }
  },
  compted: {
    code() {
      return this.platCode + "____" + this.roleCode
    },
  },
  watch: {
    visible: function (showFlag) {
      if (!showFlag) return
      this.querySystemArea()
    },
    code: function () {
      this.querySystemArea()
    },
  },
  mounted() {
    // this.querySystemArea()
  },
  methods: {
    onClose() {
      this.$emit("change-visible", false)
    },
    onChange() {
      this.onClose()
      this.$emit("change")
    },
    async querySystemArea() {
      if (!this.visible) return
      if (!this.platCode) return
      if (!this.roleCode) return

      await pageRole
        .query({
          plat_code: this.platCode,
          plat_abbreviation: this.$e.platform,
        })
        .then((response) => {
          if (response.code !== 1) {
            this.$message.warning(response.message)
            return
          }

          if (response.data && response.data.length > 0) {
            this.data = response.data
          }
          return
        })

      this.checkedKeys = this.selectItems
    },
    async handleSubmit() {
      this.confirmLoading = true
      await userRoleMenu
        .update(
          this.$e.platform,
          this.platCode,
          this.$e.role,
          this.roleCode,
          this.checkedKeys
        )
        .then((response) => {
          if (response.code !== 1) {
            this.$message.error(response.message)
            return
          }
          this.$message.success(response.message)
          this.onChange()
          return
        })
        .catch((e) => {
          console.log(e)
        })

      this.confirmLoading = false
    },
  },
}
</script>

<style lang="less" type="text/less" scoped>
.ant-form-item {
  margin-bottom: 6px;
}
</style>
